<template>
  <Card title="用户爱好">
    <div ref="chartRef" style="width: 100%; height: 300px"></div>
  </Card>
</template>
<script lang="ts" setup>
  import { Ref, ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  import { defHttp } from '@/utils/http/axios';
  const getSubscriberSignal = () => defHttp.get({ url: '/syMarketingDepartment/subscriberSignal' });

  function f(data: []) {
    setOptions({
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: '来源',
          type: 'pie',
          radius: '80%',
          center: ['50%', '50%'],
          color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9', '#FF0000', '#871F78', '#8E236B', '#D9D9F3', '#00FF00', '#6B238E'],
          data: data.sort((a, b) => a.value - b.value),
          roseType: 'radius',
          animationType: 'scale',
          animationEasing: 'exponentialInOut',
          animationDelay: function () {
            return Math.random() * 400;
          },
        },
      ],
    });
  }

  getSubscriberSignal().then((res) => {
    const data = res.map((item) => {
      item.value = item.amount;
      return item;
    });
    f(data);
  });
</script>
